<template>
  <div class="app-container" style="height: 100%">
    <div
      v-loading="loading"
      class="app-container-inner"
      style="display: flex; flex-direction: column"
      element-loading-text="加载中..."
    >
      <div class="header">
        <div class="search">
          <el-select
            v-model="dataValue.brandId"
            :loading="loading2"
            placeholder="产品品牌"
            clearable
            @change="getList"
            @clear="getList"
          >
            <template #header>
              <div class="select_header">
                <el-input
                  v-model.trim="dataPage.name"
                  placeholder="请输入关键字"
                  @keyup.enter="getBrandPageSelect"
                />
                <h-plain-button @click="getBrandPageSelect">搜索</h-plain-button>
              </div>
            </template>
            <el-option
              v-for="(item, index) in brandData"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            v-model="dataValue.typeId"
            placeholder="产品分类"
            :loading="loading3"
            clearable
            @change="getList"
            @clear="getList"
          >
            <template #header>
              <div class="select_header">
                <el-input
                  v-model.trim="dataPage2.name"
                  placeholder="请输入关键字"
                  @keyup.enter="getTypePageSelect"
                />
                <h-plain-button @click="getTypePageSelect">搜索</h-plain-button>
              </div>
            </template>
            <el-option
              v-for="(item, index) in typeData"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-input
            v-model.trim="dataValue.keyword"
            clearable
            placeholder="批次号/创建人员"
            @keyup.enter="codeKeyup"
            @clear="getList"
          />
          <HButton type="primary" @click="getList">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </HButton>
          <HButton @click="clearVlaue">
            <el-icon>
              <RefreshRight />
            </el-icon>
            重置
          </HButton>
        </div>
      </div>
      <div class="table">
        <el-table
          border
          stripe
          resizable
          :data="dataList"
          style="width: 100%; position: absolute"
          height="100%"
          @cell-dblclick="viewDetail"
        >
          <!-- 序号 -->
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="50"
            fixed="left"
            :align="'center'"
          />

          <!-- 批次名称 -->
          <el-table-column show-overflow-tooltip prop="name" label="批次名称" width="180" />

          <!-- 批次号 -->
          <el-table-column show-overflow-tooltip prop="code" label="批次编号" width="150">
            <template #default="scope">
              <span class="color_text" @click="viewDetail(scope.row.id)">
                {{ scope.row.code }}
              </span>
            </template>
          </el-table-column>

          <!-- 批次类型 -->
          <el-table-column show-overflow-tooltip label="批次类型" width="74">
            <template #default="scope">
              <span v-if="scope.row.type == 1">成品</span>
              <span v-else>物料</span>
            </template>
          </el-table-column>

          <!-- 生成数量 -->
          <el-table-column
            show-overflow-tooltip
            prop="qty"
            label="生成数量"
            :align="'right'"
            width="100"
          />

          <!-- 激活数量 -->
          <el-table-column
            show-overflow-tooltip
            prop="activaCount"
            :align="'right'"
            label="激活数量"
            width="100"
          />

          <!-- 未激活数量 -->
          <el-table-column show-overflow-tooltip label="未激活数量" :align="'right'" width="100">
            <template #default="scope">
              <span>
                {{ scope.row.qty - scope.row.activaCount }}
              </span>
            </template>
          </el-table-column>

          <!-- 创建人员 -->
          <el-table-column show-overflow-tooltip prop="createEmp" label="创建人员" width="120" />

          <!-- 创建方式 -->
          <el-table-column show-overflow-tooltip prop="codeSource" label="创建方式" width="110">
            <template #default="scope">
              <span v-if="scope.row.codeSource == 1">系统创建</span>
              <span v-if="scope.row.codeSource == 2">系统导入</span>
              <span v-if="scope.row.codeSource == 3">工单报单创建</span>
              <span v-if="scope.row.codeSource == 4">用友ERP</span>
              <span v-if="scope.row.codeSource == 5">金蝶云星空条码</span>
            </template>
          </el-table-column>

          <!-- 创建时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="paginDom"
          :list_total="total"
          @size-change="getList()"
          @current-change="getList(false)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, onMounted, reactive, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { batchgetList } from '@/api/code'
  import { brandPageSelect, typePageSelect } from '@/api/goodsInfo'
  import { ElMessage } from 'element-plus'
  import _ from 'lodash'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.snCode.batchList,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  const route = useRoute()
  const router = useRouter()
  const total = ref(0)
  const paginDom = ref() // 分页dom
  const loading = ref(true)
  const loading2 = ref(false)
  const loading3 = ref(false)
  const dataValue = reactive({
    brandId: '',
    keyword: '',
    limit: 0,
    page: 0,
    typeId: '',
  })
  const dataPage = reactive({
    limit: 0,
    name: '',
    page: 0,
  })
  const dataPage2 = reactive({
    limit: 0,
    name: '',
    page: 0,
  })
  const typeData = ref(null)
  const brandData = ref(null)
  // 查看
  const viewDetail = (id) => {
    router.push({ path: `/code/batch/${id}` })
  }
  const dataList = ref(null)
  const getList = (val = true) => {
    if (val) {
      paginDom.value.setPage()
    }
    dataValue.limit = paginDom.value.size
    dataValue.page = paginDom.value.current
    batchgetList(dataValue).then((res) => {
      if (res.data.code == 20000) {
        dataList.value = res.data.data.rows
        total.value = parseInt(res.data.data.total) || 0
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 5000,
          plain: true,
        })
      }
      loading.value = false
    })
  }

  const getBrandPageSelect = async () => {
    loading2.value = true
    const res = await brandPageSelect(dataPage)
    brandData.value = res.data.data.rows
    loading2.value = false
  }

  const getTypePageSelect = async () => {
    loading3.value = true
    const res = await typePageSelect(dataPage2)
    typeData.value = res.data.data.rows
    loading3.value = false
  }
  const codeKeyup = () => {
    if (dataValue.keyword) {
      getList()
    } else {
      ElMessage({
        showClose: true,
        message: '请输入关键词搜索',
        duration: 5000,
        type: 'warning',
        plain: true,
      })
    }
  }
  const clearVlaue = () => {
    dataValue.brandId = null
    dataValue.keyword = ''
    dataValue.typeId = null
    getList()
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'newCode') {
        getList()
      }
    },
  )

  onMounted(() => {
    getList()
    getBrandPageSelect()
    getTypePageSelect()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
